<template>
  <div class="ht-search-form" style="margin-top: 6px">
    <p class="ht-form-title">收酒信息</p>
    <el-row :gutter="24" class="ht-form-row" style="margin-top: 16px">
      <el-col class="ht-de-item" :span="4">
        <div class="ht-de-title">交酒单号</div>
        <div class="ht-de-content">
          {{ selectRow.transOrderNo }}
        </div>
      </el-col>
      <el-col class="ht-de-item" :span="4">
        <div class="ht-de-title">收酒单号</div>
        <div class="ht-de-content">
          {{ selectRow.reciveWineOrderNo }}
        </div>
      </el-col>

      <el-col class="ht-de-item" :span="4">
        <div class="ht-de-title">收酒日期</div>
        <div class="ht-de-content">
          {{ selectRow.reciveWineDate.slice(0, 10) }}
        </div>
      </el-col>
    </el-row>

    <p class="ht-form-title">收酒酒品</p>
    <el-row :gutter="24" class="ht-form-row" style="margin-top: 16px">
      <el-col class="ht-de-item" :span="4">
        <div class="ht-de-title">酒品名称</div>
        <div class="ht-de-content">
          {{ selectRow.reciveWineBreed }}
        </div>
      </el-col>
      <el-col class="ht-de-item" :span="4">
        <div class="ht-de-title">酒品代码</div>
        <div class="ht-de-content">
          {{ selectRow.reciveWineBreedCode }}
        </div>
      </el-col>

      <el-col class="ht-de-item" :span="4">
        <div class="ht-de-title">生产年月</div>
        <div class="ht-de-content">
          {{ selectRow.reciveWineBreedMaduDate.slice(0, 7) }}
        </div>
      </el-col>
    </el-row>

    <p class="ht-form-title">降级信息</p>
    <el-row :gutter="24" class="ht-form-row" style="margin-top: 16px">
      <el-col class="ht-de-item" :span="4">
        <div class="ht-de-title">是否降级</div>
        <div class="ht-de-content">
          <span v-if="selectRow.reciveWineStatus == 1">
            <Status color="#E2B236">
              待确认
            </Status>
          </span>
          <span
            v-else-if="
              selectRow.isDemoted == true && selectRow.reciveWineStatus !== 1
            "
            >是</span
          >
          <span v-else>否</span>
        </div>
      </el-col>

      <div
        v-if="selectRow.isDemoted == true && selectRow.reciveWineStatus !== 1"
      >
        <el-col class="ht-de-item" :span="4">
          <div class="ht-de-title">降级后酒品</div>
          <div class="ht-de-content">
            {{ selectRow.wineBreedAfterDemoted }}
          </div>
        </el-col>
        <el-col class="ht-de-item" :span="4">
          <div class="ht-de-title">酒品代码</div>
          <div class="ht-de-content">
            {{ selectRow.wineBreedCodeAfterDemoted }}
          </div>
        </el-col>

        <el-col class="ht-de-item" :span="4">
          <div class="ht-de-title">酒度</div>
          <div class="ht-de-content">
            {{ selectRow.alcoholicityAfterDemoted }}{{ ' %vol' }}
          </div>
        </el-col>
        <el-col class="ht-de-item" :span="4">
          <div class="ht-de-title">温度</div>
          <div class="ht-de-content">
            {{ selectRow.wineTemperatureAfterDemoted }}{{ ' ℃' }}
          </div>
        </el-col>
        <el-col class="ht-de-item" :span="4">
          <div class="ht-de-title">标准酒度</div>
          <div class="ht-de-content">
            {{ selectRow.standardAlcoholicity }}{{ ' %vol' }}
          </div>
        </el-col>

        <el-col class="ht-de-item" :span="4">
          <div class="ht-de-title">验度人</div>
          <div class="ht-de-content">
            {{ selectRow.demotedValueTester }}
          </div>
        </el-col>
      </div>
    </el-row>
    <!-- <p class="ht-form-title">运输信息</p>
    <el-row :gutter="24"
            class="ht-form-row"
            style="margin-top: 16px">
      <el-col class="ht-de-item"
              :span="4">
        <div class="ht-de-title">车牌号</div>
        <div class="ht-de-content">
          {{ 1414 }}
        </div>
      </el-col>
      <el-col class="ht-de-item"
              :span="4">
        <div class="ht-de-title">司机</div>
        <div class="ht-de-content">

        </div>
      </el-col>

      <el-col class="ht-de-item"
              :span="4">
        <div class="ht-de-title">押车员</div>
        <div class="ht-de-content">

        </div>
      </el-col>

    </el-row> -->

    <p class="ht-form-title">收酒明细</p>

    <ht-table
      class="ht-table-no-border"
      :data="state.dataSource"
      style="width: 100%; margin-top: 12px"
      border
      :height="`calc(100vh - 314px - ${state.searchHeight}px)`"
      highlight-current-row
      :hide-page="true"
      :hide-order="true"
      :columns="columns"
    >
      <!-- <template slot="header_wineStatus">
        酒度差异<tips tips="移入-移出"></tips>
      </template> -->
      <template slot="weight" slot-scope="{ row }">
        {{ row.weight }}{{ row.uom }}
      </template>
      <template slot="convertValue" slot-scope="{ row }">
        {{ row.convertValue }}{{ row.uom }}
      </template>
    </ht-table>
  </div>
</template>
<script lang="ts">
import { WineReceiveOrderPageListDto } from '@/plugins/api';
import { Column } from 'htui-yllkbz/src/packages/type';
import Status from '@/components/status.vue';
import { Component, Prop, Vue } from 'vue-property-decorator';
interface State {
  /** 数据状态 */
  loading: boolean;
  dataSource: any;
}
@Component({
  components: {
    Status,
  },
})
export default class Index extends Vue {
  @Prop() selectRow!: any;

  /** 数据 */
  state: State = {
    loading: false,
    dataSource: [],
  };
  /** 生命周期 */
  mounted() {
    // this.state.dataSource = [
    //   {
    //     factoryArea: this.selectRow?.factoryArea,
    //     wineWarehouseName: this.selectRow?.wineWarehouseName,
    //     sapName: this.selectRow?.sapName,
    //     sapCode: this.selectRow.sapCode,
    //     alcoholicity: this.selectRow.alcoholicity,
    //     temperature: this.selectRow.temperature
    //   },
    // ];

    // 将selectRow的数据传给dataSource
    this.state.dataSource = [{}];
    this.columns.forEach((item: any) => {
      for (const key in this.selectRow) {
        if (key == item.key) {
          this.state.dataSource[0][key] = this.selectRow[key];
        }
      }
    });
  }
  /** 方法 */
  /** 监听 */
  /** 计算属性 */
  /** 计算属性 */
  get columns(): Column[] {
    return [
      { key: 'factoryName', title: '厂区' },

      { key: 'standardAlcoholicity', title: '标准酒度' },
      { key: 'weight', title: '原度数量' },

      { key: 'convertValue', title: '折60°数量' },
      { key: 'grossWeightOpUser', title: '毛重经手人' },
      { key: 'tareGrossWeightOpUser', title: '皮重经手人' },

      { key: 'valueTester', title: '验度人' },
    ];
  }
}
</script>
<style lang="scss" scoped>
.el-tooltip {
  color: #cacecb;
}
</style>
